<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Container</title>
    <style>
    html, body {
        height: 100%;
    }

    #graphContainer {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 100%;
        background: url('./images/grid.gif');
        cursor: default;
    }
    </style>
</head>

<body onload="main(document.getElementById('graphContainer'))">
<div id="graphContainer"></div>
</body>

<script>
const mxBasePath = '../static/mxgraph';
</script>

<script src="../mxClient.js"></script>
<script>

// www/js/EditorUi.js
// EditorUi.prototype.refresh -> graph.sizeDidChange

// www/js/Graph.js
/**
 * Disables drill-down for non-swimlanes.
 */
Graph.prototype.isValidDropTarget = function(cell)
{
  var state = this.view.getState(cell);
  var style = (state != null) ? state.style : this.getCellStyle(cell);

  return mxUtils.getValue(style, 'part', '0') != '1' && (this.isContainer(cell) ||
    (mxGraph.prototype.isValidDropTarget.apply(this, arguments) &&
      mxUtils.getValue(style, 'dropTarget', '1') != '0'));
};

// /**
//  * Disables drill-down for non-swimlanes.
//  */
// Graph.prototype.isContainer = function(cell)
// {
//   var state = this.view.getState(cell);
//   var style = (state != null) ? state.style : this.getCellStyle(cell);
//
//   if (this.isSwimlane(cell))
//   {
//     return style['container'] != '0';
//   }
//   else
//   {
//     return style['container'] == '1';
//   }
// };


// Graph.prototype.isCellFoldable = function(cell)
// {
//   debugger
//   var state = this.view.getState(cell);
//   var style = (state != null) ? state.style : this.getCellStyle(cell);
//
//   return this.foldingEnabled && !this.isCellLocked(cell) &&
//     ((this.isContainer(cell) && style['collapsible'] != '0') ||
//       (!this.isContainer(cell) && style['collapsible'] == '1'));
// };


function main(container) {
  // 禁用鼠标右键
  mxEvent.disableContextMenu(container);
  const graph = new mxGraph(container);
  const parent = graph.getDefaultParent();
  graph.getModel().beginUpdate();
  try {
    // const v1 = graph.insertVertex(parent, null, 'I am a container', 120, 50, 180, 130, 'whiteSpace=wrap;html=1;aspect=fixed;container=1;collapsible=0;fillOpacity=8;strokeOpacity=8;');
    const v1 = graph.insertVertex(parent, null, 'I am a container', 120, 50, 180, 130);
    const v2 = graph.insertVertex(parent, null, 'move me into the container', 200, 210, 150, 80);
    setTimeout(()=> {
      graph.setCellStyle('container=1',[v1])
    },200)
  } finally {
    graph.getModel().endUpdate();
  }
}


</script>
</html>
